<template>
  <el-container class="main">
    <el-aside width="220px" style="display: block;">
      <el-switch
          v-model="keyBoard"
          active-text="ON"
          inactive-text="OFF">
      </el-switch>
<!--      头像-->
      <div class="block">
        <p>
          <el-avatar :size="100"
                     :src="circleUrl"
                     style="cursor: pointer"
                     @click="kindInit();$router.push('/index');">
          </el-avatar>
        </p>
<!--        需要匹配用户数据-->
        <el-tooltip class="item" effect="dark" content="1450180985" placement="bottom">
<!--          http://wpa.qq.com/msgrd?v=3&uin={qq}&site=qq&menu=yes-->
          <img src="../assets/imags/qq.png" @click="assig('http://wpa.qq.com/msgrd?v=3&uin=1450180985&site=qq&menu=yes')">
        </el-tooltip>

        <el-tooltip class="item" effect="dark" content="JiFZJC" placement="bottom">
          <img src="../assets/imags/wechat.png">
        </el-tooltip>

<!--          https://user.qzone.qq.com/{qq}-->
        <img src="../assets/imags/qzone.png" @click="assig('https://user.qzone.qq.com/1450180985')">

<!--          https://space.bilibili.com/{id}/-->
        <img src="../assets/imags/bilibili.png" @click="assig('https://space.bilibili.com/694467111/')">

<!--          https://music.163.com/#/user/home?id={id}-->
        <img src="../assets/imags/music.png" @click="assig('https://music.163.com/#/user/home?id=1765559188')">

        <img src="../assets/imags/github.png" @click="assig('https://gitee.com/dftdla')">

      </div>

      <div>
        <p class="btn aside" @click="kindInit();$router.push('/index');">首页</p>
        <p class="btn aside" @click="$router.push({
        name:'content',
        params:{id:0}
      })">本站介绍</p>
        <p v-for="p in kinds" :key="p.id" class="btn aside" @click="changeKind(p.name);$router.push('/index/'+p.name)">{{p.name}}</p>
        <p style="height: 20px"></p>
        <p class="btn aside" v-show="level&&user.level" @click="open">新增分类</p>
        <p class="btn aside" v-show="level&&user.level" @click="openEdit">新增文章</p>
        <p class="btn aside" @click="openUserData">个人中心</p>
        <p class="btn aside" v-show="level&&user.level" @click="$router.push('/control')">后台管理</p>

      </div>

    </el-aside>
<!--    <el-container>-->
<!--    </el-container>-->
    <!--      <el-header>-->
    <!--        <h1 @click="out" style="cursor: pointer">欢迎来到首页！</h1>-->
    <!--      </el-header>-->
    <el-main class="backTarget">
      <router-view/>
      <el-backtop target=".backTarget" style="color: #797d7d"></el-backtop>

      <el-footer style="position: relative">
        <p>
          <span class="btn" style="margin: 0;">Station construction&nbsp;:&nbsp;{{this.$store.state.master}}</span>
          <el-divider direction="vertical"></el-divider>
          <span class="btn" style="margin: 0;">Start time&nbsp;:&nbsp;{{this.$store.state.masterTime}}</span>
          <el-divider direction="vertical"></el-divider>
          <span class="btn" style="margin: 0;">Website type&nbsp;:&nbsp;个人博客</span>
        </p>
        <p>
          <span class="btn" style="margin: 0;" @click="assig('http://beian.miit.gov.cn/')">豫ICP备2022024490号</span>
        </p>
      </el-footer>
    </el-main>
  </el-container>
  <el-dialog
      title="新增分类"
      v-model="dialogVisible"
      width="30%">
    <el-input
        placeholder="请输入分类名称"
        v-model="kindUp"
        clearable
        @keyup.enter="updateKind">
    </el-input>
    <p style="height: 20px"></p>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateKind">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getList, insert} from "@/api/kind";
import foot from "@/components/foot";
import pubsub from "pubsub-js"
import image from "../assets/imags/头像.jpeg"
import {userGet} from "@/api/user";

export default {
  name: "indexQ",
  components:[foot],
  methods:{
    out(){
      localStorage.removeItem(this.userObjectName);
      this.$router.push('/login');
    },
    getListKind(){
      getList().then(res=>{
        let x=res.data;
        if(x.code==="100"){
          this.kinds=x.data;
        }else this.$notify.error(this.notifyMsgErr(x.msg));
      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
    },
    assig(url){
      window.open(url);
    },
    open(){
      this.dialogVisible=true;
    },
    updateKind(){
      this.dialogVisible=false;
      if(this.kindUp===null||this.kindUp.trim()==="") return;
      console.log(this.kindUp);
      insert(this.kindUp).then(res=>{
        console.log(this.kindUp);
        if(res.data.code==="100") {
          this.$notify.success(this.notifyMsgSuc(res.data.data));
          this.getListKind();
        }
        else this.$notify.error(this.notifyMsgErr(res.data.msg));
        this.kindUp=null;
      }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
    },
    changeKind(name){
      pubsub.publish('kindChange',name);
    },
    kindInit(){
      pubsub.publish('kindInit');
    },
    openEdit(){
      this.$router.push('/index/edit');
    },
    openUserData(){
      if(this.localGetObject(this.userObjectName)) this.$router.push('/index/user');
      else this.$router.push('/login');
    },
    Init(){
      this.getListKind();
      setTimeout(()=> {

        this.user=this.localGetObject(this.userObjectName)

        if(this.user){
          userGet(this.user.id).then(res=>{

            this.user=res.data.data;

            this.level=this.user.level;

            this.localSetObject(this.userObjectName,this.user);

          }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
        }else this.level=false;



      },1000);
    }
  },
  data(){
    return{
      kinds:[],
      circleUrl:image,
      images:[],
      user:[],
      keyBoard:true,
      dialogVisible:false,
      kindUp:null,
      level:null
    }
  },
  mounted() {
    this.Init();
    pubsub.subscribe('update',()=>{
      this.Init();
    })
  },
  watch:{
    keyBoard(newValue){
      this.$store.commit('musicKey',newValue);
    }
  }
}
</script>

<style lang="less" scoped>
  .main{
    height: 100%;
  }
  .aside{
    height: 30px;
    line-height: 30px;
    //color: #333333;
    box-sizing: border-box;
    &:hover{
      border-bottom: #797d7d solid 1px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
  }
  .block{
    margin: 40px 0;
    user-select: none;
    img{
      width: 28px;
      cursor: pointer;
      margin: 3px;
    }
  }
</style>

<style>
.el-aside {
  /*background-color: #D3DCE6;*/
  background: #E9EEF3;
  text-align: center;
  /*line-height: 200px;*/
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);*/
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)*/
  border-right: #797d7d dashed 1px;
  padding-bottom: 120px;
}
/*.el-header {*/
/*  background-color: #B3C0D1;*/
/*  text-align: center;*/
/*  line-height: 60px;*/
/*}*/

.el-footer{
  /*background-color: #B3C0D1;*/
  /*color: #333;*/
  text-align: center;
  line-height: 25px;
  padding-top: 20px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  position: relative;
  line-height: 30px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
